<template>
  <div id="detaiContrainer" class="slide-enter-active">
    <Header title="影片详情">
      <i class="iconfont icon-right" @touchstart="handleToBack"></i>
    </Header>
    <Loading v-if="isLoading" />
    <div v-else id="content" class="contentDetail">
      <div class="detail_list">
        <div class="detail_list_bg" :style="{'background-image':'url('+detailMovie.img.replace(/w\.h/,'148.128')+')'}"></div>
        <div class="detail_list_filter"></div>
        <div class="detail_list_content">
          <div class="detail_list_img">
            <img :src="detailMovie.img | setWH('128.180')" />
          </div>
          <div class="detail_list_info">
            <h2>{{ detailMovie.nm }}</h2>
            <p>{{ detailMovie.enm }}</p>
            <p>{{ detailMovie.sc }}</p>
            <p>{{ detailMovie.cat }}</p>
            <p>{{ detailMovie.src }} / {{ detailMovie.dur }}分钟</p>
            <p>{{ detailMovie.pubDesc }}</p>
          </div>
        </div>
      </div>
      <div class="detail_intro">
        <p>
          {{ detailMovie.dra }}
        </p>
      </div>
      <div class="detail_player swiper-container" ref="detail_player">
        <ul class="swiper-wrapper">
          <li
            v-for="(item, index) in detailMovie.photos"
            :key="index"
            class="swiper-slide"
          >
            <div>
              <img :src="item | setWH('140.128')" />
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
export default {
  name: "Detail",
  data() {
    return {
      detailMovie: {},
      isLoading:true,
    };
  },
  components: {
    Header,
  },
  props: ["movieId"],
  mounted() {
    this.axios
      .get("/ajax/ajax/detailmovie?movieId=" + this.movieId)
      .then((res) => {
        this.detailMovie = res.data.detailMovie;
        this.isLoading = false;
        this.$nextTick(() => {
          new Swiper(this.$refs.detail_player, {
            slidesPerView: "auto",
            freeMode: true,
            freeModeSticky: true,
          });
        });
      });
  },
  methods: {
    handleToBack() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes slideMove {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

.slide-enter-active {
  animation: 0.3s slideMove;
}
#detaiContrainer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  min-height: 100%;
  background: white;
  #content {
    .detail_intro {
      padding: 10px;
    }
    .detail_player {
      margin: 20px;
      .swiper-slide {
        width: 70px;
        margin-right: 20px;
        text-align: center;
        font-size: 14px;
        img {
          width: 100%;
          margin-bottom: 5px;
        }
        p:nth-of-type(2) {
          color: #999;
        }
      }
    }
    .contentDetail {
      display: block;
      margin-bottom: 0;
    }
    .detail_list {
      height: 200px;
      width: 100%;
      position: relative;
      overflow: hidden;
      .detail_list_bg {
        width: 100%;
        height: 100%;
        background: url(/assets/movie_1.jpg) 0 40%;
        filter: blur(20px);
        background-size: cover;
        position: absolute;
        left: 0;
        top: 0;
      }
      .detail_list_filter {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #40454d;
        opacity: 0.55;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }
      .detail_list_content {
        display: flex;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
      }
      .detail_list_img {
        width: 108px;
        height: 150px;
        border: solid 1px #f0f2f3;
        margin: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .detail_list_info {
        margin-top: 20px;
        h2 {
          font-size: 20px;
          color: white;
          font-weight: normal;
          line-height: 40px;
        }
        p {
          color: white;
          line-height: 20px;
          font-size: 14px;
          color: #ccc;
        }
      }
    }
  }
}
</style>